<template>
  <div class="monitor_page">
    <!-- table -->
    <el-card class="monitor_page-left" :class="{toggle: isToggleStatus}" shadow="hover">
      <div class="filter_header">
        <el-form ref="form" label-width="100px">
          <div class="monitor_page-filter" v-show="!isToggleStatus">
            <el-form-item label="起止时间：">
              <el-date-picker
                style="width:100%;min-width:240px"
                size="small"
                value-format="timestamp"
                v-model="timerArray"
                type="datetimerange"
                :picker-options="pickerOptions"
                :clearable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
        <div class="monitor_page-filter flex-between" :class="{setMarginTop: isToggleStatus}">
          <div class="monitor_page-filter-left">
            <button class="toggle_wrap" @click="toggleStatus">
              <i class="el-icon-s-fold" :class="{rotate: isToggleStatus}"></i>
            </button>
            <div v-show="!isToggleStatus">
              <el-button
                size="small"
                @click="confirmDelete"
                icon="el-icon-delete-solid"
                v-if="hasPermission('monitor:record:del')"
                type="danger">删除
              </el-button>
              <el-button
                size="small"
                plain
                v-if="hasPermission('monitor:record:mark')"
                type="primary"
                @click="showMonitorRemarkDialog">说明
              </el-button>
              <el-button
                size="small"
                plain
                v-if="jiuGanKeJi"
                type="primary"
                @click="lookEquipRecord(timerArray,equipId)">运行日志
              </el-button>
              <el-button
                size="small"
                plain
                v-if="hasPermission('monitor:record:export')"
                @click="$emit('export')"
                icon="el-icon-download"
                type="primary">数据导出
              </el-button>
            </div>
          </div>
          <el-button
            v-show="!isToggleStatus"
            size="small"
            type="primary"
            class="common_btn-defalut"
            icon="el-icon-search"
            @click="form.page=1;$emit('update')">搜索
          </el-button>
        </div>
      </div>
      <!-- table -->
      <el-table
        v-show="!isToggleStatus"
        :data="tableList"
        border
        :height="515"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        tooltip-effect="dark">
        <el-table-column  type="selection" width="28">
        </el-table-column>
        <el-table-column prop="createTime" label="数据采集时间" min-width="135">
          <template slot-scope="scope">
            {{scope.row.createTime | formatTimer }}
          </template>
        </el-table-column>
        <el-table-column prop="realValue" label="水柱高度(m)" min-width="90">
        </el-table-column>

      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-show="!isToggleStatus"
        :disabled="isToggleStatus"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
        :total="form.total">
      </el-pagination>
    </el-card>

    <!-- 绘图部分 -->
    <div class="monitor_page-right">

      <el-card class="card_echarts" shadow="hover">
        <!--          <echarts-five-change ref="echartsChange" @showRemarkDailog="showRemarkDialog"></echarts-five-change>-->
        <echarts-five-change ref="echartsChange"></echarts-five-change>
      </el-card>

    </div>

    <dialog-remark ref="remark" @update="$emit('update')"></dialog-remark>
    <monitor-remark ref="monitorRemark" @update="$emit('update')"></monitor-remark>
  </div>
</template>

<script>
import EchartsFiveChange from '../monitor-echarts/base/echarts-5-change'
import ItemMixins from './item.mixins'

export default {
  mixins: [ItemMixins],
  components: {EchartsFiveChange},
  data() {
    return {
      // 当前的图表钩子
      chartsName: ['echartsChange'],
      isShowDialog: false
    }
  },
  methods: {
    // 数据刷新
    update({data, holeDepth, monitorName, monitorInfo}) {
      this.equipId = monitorInfo.bindEquipId
      this.collectionList = data.recordList
      this.form.page = 1;
      this.form.total = this.collectionList.length
      this.chartsName.map(name => {
        this.$refs[name].updateEchart(data, monitorName, holeDepth)
      })
    }
  }
}
</script>

<style scoped="scoped" lang="less">

  @import url('./commom.less');

  .card_echarts {
    height: 680px;
  }

  .monitor_page-left {
    // 15px未margin
    height: 680px;
  }

  .el-card {
    background: transparent;
  }
</style>
